<template>
	<div class="tab">
		<van-tabs
			v-model="active"
			background="#FFFFFF"
			title-active-color="#F70114"
			title-inactive-color="#171717"
			color="#F70114"
			sticky
			animated
			swipeable
			@change="changeActive"
		>
			<van-tab v-for="(item, index) in list" :title="item.name" :key="index"></van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { Tab, Tabs } from 'vant';

export default {
	name: 'Tab',
	components: {
		'van-tabs': Tabs,
		'van-tab': Tab
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [
					{
						name: '推荐'
					},
					{
						name: '居家'
					}
				];
			}
		}
	},
	data() {
		return {
			active: 0
		};
	},
	created() {},
	methods: {
		changeActive() {}
	}
};
</script>

<style lang="scss" scoped>
.tab {
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
}
</style>
